<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>Login</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>
    <script type="text/javascript" src="/jq/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/jq/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="/js/formSelects-v4.min.js"></script>
</head>
<body>
<!-- html渲染-->
<div class="layui-container">
    <div class="layui-progress" style="margin: 15px 0 30px;">
        <div class="layui-progress-bar" lay-percent="100%"></div>
    </div>
    <p style="text-align: center">erf23测试</p>


    <form id="useLogin" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input id="username" type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input id="password" type="text" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>




        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="loginBtn"  type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>



</div>


<!-- JS处理脚本  -->


<script>
    layui.use(['form' ,'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        console.log(form)

        //监听提交
        form.on('submit(demo1)', function(){
            var username=$("#username").val();
            var password=$("#password").val();


            let req = {
                username:username,
                password:password
            }




            console.log(req);

            if (req.password !== '' && req.username !== ''){

                //写法一： ajax-post-json传输
                $.ajax(
                    {
                        url:'/user/login2',
                        type:'post',
                        dateType:'json',
                        // beforeSend: function(xhr) {
                        //     xhr.setRequestHeader("organId:'1333333333'");
                        // },
                        headers:{'Content-Type':'application/json;charset=utf8','organId':'1333333333'},
                        data:JSON.stringify(req),
                        success:function(data){console.log("sucess");},
                        error:function(data){console.log("error");}
                    }
                );


                //写法二：ajax-post-form表单传输
                $.post("/user/login",$("#useLogin").serialize(),function(data){

                    console.warn(data)
                    // if(data.code == 1){
                    //     window.location.href=data.url;
                    // }else{
                    //     layer.alert(data.message,function(){
                    //         layer.closeAll();//关闭所有弹框
                    //     });
                    // }


                    if (data.code == 0){
                        window.location.href='/frame'
                    }else {
                        layer.alert("用户名/密码-错误", {
                            title: '登录失败'
                        })
                        return false;
                    }
                });





            }else {
                layer.alert("参数为空", {
                    title: '最终的提交信息'
                })
            }






            return false;
        });


        //各种基于事件的操作，下面会有进一步介绍
    });


</script>

</body>
</html>